<template>
    <div class="shoppingBar  flex flex-col items-center bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300">
      <div class="bg-white dark:bg-zinc-700 p-6 rounded-lg shadow-lg text-center">
        <img src="https://placehold.co/100x100" alt="empty cart" class="mx-auto mb-4" />
        <p class="mb-4 text-lg">目前没有添加商品哦~</p>
        <button class="bg-white dark:bg-zinc-600 border border-zinc-300 dark:border-zinc-500 text-zinc-700 dark:text-zinc-300 py-2 px-4 rounded-full">
          去首页逛逛
        </button>
      </div>
    </div>
</template>
  
<script>
export default {
    // 在这里可以添加组件的逻辑，例如数据属性、方法等
}
</script>
  
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
.shoppingBar{
    margin: 8rem 0 0 0;
}
</style>